<script setup lang="ts">
import "@/assets/css/chat/styles.css";
import { computed, nextTick, onMounted, reactive, ref, watch } from "vue";
// import { postMessage，getSessionId } from "@/api/maxkb";
import { useDarkMode } from "@/hooks/useToggleDarkMode";
import { getSessionId ,postMessage} from "@/api/maxkb";
import {
  Button,
  Collapse,
  DatePicker,
  Input,
  message,
  Radio,
  Select
} from "ant-design-vue";
import axios from "axios";
// import { getSessionId } from "@/api/maxkb";

// 消息对象类型定义
interface Message {
  id: number; // 消息ID
  content: string; // 消息内容
  isSelf: boolean; // 是否是用户自己发送的消息
  timestamp: string; // 消息发送时间
  avatar: string; // 用户头像
  suggestedQuestions?: string[]; // 新增建议问题字段
}

// 条件选择框相关
const isOptionsVisible = ref(["0"]);
const mkUserInputFieldList = ref<any[]>([]);

// 清空条件
const clearConditions = () => {
  // 这里清空了每个字段的选择值
  mkUserInputFieldList.value.forEach((field: any) => {
    switch (field.input_type) {
      case "TextInput":
        field.value = "";
        break;
      case "SingleSelect":
        field.selectedOption = "";
        break;
      case "MultiSelect":
        field.selectedOptions = [];
        break;
      case "RadioCard":
        field.selectedCard = "";
        break;
      case "DatePicker":
        field.selectedDate = null;
        break;
      case "StartDate":
        field.selectedStartDate = null;
        break;
      case "EndDate":
        field.selectedEndDate = null;
        break;
    }
  });
};

// 用户信息
const userData = {
  id: 3,
  password: "123456",
  realName: "youyou",
  email: "123456@163.com",
  roles: ["user"],
  username: "youyou",
  icon: "/public/favicon.ico",
  agentTab: [
    {
      agent: "问答系统",
      apiKey: "application-882bcd5799693efa386588a7f57af412",
      desc: "",
      icon: ""
    }
  ],
  difyTab: [
    {
      dify: "珠宝行业资讯-店长老板通用版1.0",
      apiKey: "app-QJIJ4EEoOzuyCTxgcVxD7GWE",
      desc: "",
      icon: ""
    },
    {
      dify: "珠宝门店智能顾问--元元",
      apiKey: "app-ZlIIGv3jIZkqKJKtscpEYO2X",
      desc: "",
      icon: ""
    },
    {
      dify: "超级AI",
      apiKey: "app-yNIdZDVzTn8CO4ujIcTQodK1",
      desc: "",
      icon: ""
    },
    {
      dify: "珠宝门店高毛利产品助理",
      apiKey: "app-5YiLhQuo76Zkf0kq0LYYx2CQ",
      icon: ""
    }
  ]
};

// 对方用户信息，使用 reactive 创建响应式对象
const otherUser = reactive({
  username: "元元", // 对方用户名
  icon: "/public/favicon.ico" // 头像路径
});

// 应用参数，设置对话开场白和建议问题
// 从 localStorage 获取应用参数信息，记得解析为对象
const parameters = JSON.parse(localStorage.getItem("MKparameters") || "{}");

// 消息列表
const messages = ref<Message[]>([]);
// 新输入的消息
const newMessage = ref("");
// 消息容器的 DOM 引用
const messageContainer = ref<HTMLElement | null>(null);

// 在组件挂载后，初始化第一条消息
onMounted(() => {
  mountOptions();
  getSessionId();
  });
//挂载选项框
const mountOptions = () => {
  // console.log("456", parameters[0]);
  mkUserInputFieldList.value = parameters[0].user_input_field_list;
  // console.log(mkUserInputFieldList.value);

  // 初始化各字段的默认值
  mkUserInputFieldList.value.forEach((item: any) => {
    switch (item.input_type) {
      case "DatePicker":
        item.selectedDate = item.default_value;
        break;
      case "StartDate":
        item.selectedStartDate = item.default_value;
        break;
      case "EndDate":
        item.selectedEndDate = item.default_value;
        break;
      case "MultiSelect":
        item.selectedOptions = item.default_value || [];
        break;
      case "RadioCard":
        item.selectedCard = item.default_value;
        break;
      case "SingleSelect":
        item.selectedOption = item.default_value;
        break;
      case "TextInput":
        item.value = item.default_value || "";
        break;
    }
  });

  if (parameters[0].node_data.prologue) {
    const message: Message = {
      id: Date.now(),
      content: parameters[0].node_data.prologue,
      isSelf: false,
      timestamp: new Date().toLocaleTimeString(),
      avatar: otherUser.icon,
      suggestedQuestions: parameters.suggested_questions // 添加建议问题
    };
    messages.value.push(message);
    scrollToBottom();
  }

};

// 新增建议问题处理方法
const sendSuggestedQuestion = (question: string) => {
  addMessage(question, true);
  newMessage.value = ""; // 清空输入框
};

// 添加消息到消息列表
const addMessage = async (content: string, isSelf: boolean) => {
  const message: Message = {
    id: Date.now(), // 使用当前时间戳作为消息ID
    content, // 消息内容
    isSelf, // 是否是自己发送的消息
    timestamp: new Date().toLocaleTimeString(), // 当前时间戳
    avatar: isSelf ? userData.icon : otherUser.icon // 根据消息是否是自己发送来选择头像
  };
  messages.value.push(message); // 将消息添加到消息列表
  if (isSelf) {
    // 在用户消息发送后插入"思考中"的占位符消息
    const thinkingMessage: Message = {
      id: Date.now() + 1, // 创建一个新的ID
      content: "思考中...", // 占位符消息
      isSelf: false, // 标记为对方消息
      timestamp: new Date().toLocaleTimeString(),
      avatar: otherUser.icon
    };
    messages.value.push(thinkingMessage);
    scrollToBottom(); // 滚动到消息底部

    // 构建 JSON 格式
    const messageData = {
      message: content, // 用户输入的消息
      form_data: {
        start_date: "", // 初始化空值，稍后会填充
        end_date: "", // 初始化空值，稍后会填充
        store_number: [], // 初始化空数组，稍后会填充
        material_main_category: [], // 初始化空数组，稍后会填充
        main_category: [] // 初始化空数组，稍后会填充
      }
    };

    // 填充 form_data 字段
    mkUserInputFieldList.value.forEach(field => {
      if (field.field === "start_date") {
        messageData.form_data.start_date = field.default_value;
      } else if (field.field === "end_date") {
        messageData.form_data.end_date = field.default_value;
      } else if (field.field === "store_number") {
        messageData.form_data.store_number = field.selectedOptions;
      } else if (field.field === "material_main_category") {
        messageData.form_data.material_main_category = field.selectedOptions;
      } else if (field.field === "main_category") {
        messageData.form_data.main_category = field.selectedOptions;
      }
    });

    // 使用 axios 发送 POST 请求，并加上 Authorization 请求头
    postMessage(messageData);

    // try {
    //   const response = await axios.post(
    //     "https://riscqa.hsk.top/api/application/chat_message/b301256e-e8f6-11ef-9b7d-0242ac120002",
    //     messageData,
    //     {
    //       headers: {
    //         Authorization: "application-882bcd5799693efa386588a7f57af412" // 将 apiKey 加入 Authorization 头部
    //       }
    //     }
    //   );
    //   console.log("Response:", response.data);
    //   // 发送成功后，可以根据需求处理后续操作
    //
    //   const responseData = response.data;
    //   // 使用正则从字符串中提取出 JSON 部分
    //   const match = responseData.match(/\{.*\}/);
    //
    //   if (match) {
    //     const jsonString = match[0]; // 提取出的 JSON 字符串
    //     console.log(jsonString)
    //     const data = JSON.parse(jsonString); // 将字符串解析为对象
    //     // 获取 content 字段的值
    //     const content = data.content || ""; // 默认值为空字符串，防止没有 content 字段
    //     // 解码 Unicode 字符串
    //     const decodedContent = decodeURIComponent(content);
    //     // 添加对方回复
    //     // 找到刚刚插入的"思考中..."消息，并替换为真实的响应
    //     messages.value = messages.value.map(msg => {
    //       if (msg.content === "思考中..." && msg.isSelf === false) {
    //         return { ...msg, content: decodedContent }; // 替换为响应消息
    //       }
    //       return msg;
    //     });
    //   } else {
    //     console.error("请求回复截取失败");
    //   }
    // } catch (error) {
    //   console.error("Error:", error);
    //   // 可以显示错误提示
    // }
  }
  scrollToBottom(); // 滚动到消息底部
};

// 发送消息的方法
const sendMessage = async () => {
  if (newMessage.value.trim()) {
    // 如果消息不为空
    addMessage(newMessage.value.trim(), true); // 添加当前消息，标记为自己发送的
    newMessage.value = ""; // 清空输入框
  }
};

// 滚动到聊天框底部
const scrollToBottom = () => {
  nextTick(() => {
    if (messageContainer.value) {
      messageContainer.value.scrollTo({
        top: messageContainer.value.scrollHeight, // 滚动到最底部
        behavior: "smooth" // 平滑滚动
      });
    }
  });
};
</script>

<template>
  <!-- 条件选择折叠面板 -->

  <Collapse
    v-model:active-key="isOptionsVisible"
    style="width: 50%; margin: 0 auto; margin-bottom: 10px"
  >
    <Collapse.Panel key="0" header="选择条件">
      <div
        v-for="(field, index) in mkUserInputFieldList"
        :key="index"
        style="margin-bottom: 10px"
      >
        <!-- 渲染不同的控件 -->
        <DatePicker
          v-if="field.field === 'date'"
          v-model:value="field.selectedDate"
          :default-value="field.default_value"
          format="YYYY-MM-DD HH:mm:ss"
          show-time
          style="width: 100%"
          value-format="YYYY-MM-DD HH:mm:ss"
        />

        <DatePicker
          v-if="field.field === 'start_date'"
          v-model:value="field.selectedStartDate"
          :default-value="field.default_value"
          format="YYYY-MM-DD"
          show-time
          style="width: 100%"
          value-format="YYYY-MM-DD"
        />

        <DatePicker
          v-if="field.field === 'end_date'"
          v-model:value="field.selectedEndDate"
          :default-value="field.default_value"
          format="YYYY-MM-DD"
          show-time
          style="width: 100%"
          value-format="YYYY-MM-DD"
        />

        <Input
          v-if="field.input_type === 'TextInput'"
          v-model:value="field.value"
          :placeholder="field.label.label"
          style="width: 100%"
        />

        <Select
          v-if="field.input_type === 'SingleSelect'"
          v-model:value="field.selectedOption"
          :options="field.option_list"
          allow-clear
          placeholder="请选择一个选项"
          style="width: 100%"
        />

        <Select
          v-if="field.input_type === 'MultiSelect'"
          v-model:value="field.selectedOptions"
          :options="field.option_list"
          mode="multiple"
          placeholder="请选择多个选项"
          style="width: 100%"
        />

        <Radio.Group
          v-if="field.input_type === 'RadioCard'"
          v-model:value="field.selectedCard"
          button-style="solid"
          style="display: flex; flex-wrap: wrap; gap: 10px; width: 100%"
        >
          <Radio.Button
            v-for="option in field.option_list"
            :key="option.value"
            :value="option.value"
            style="flex: 1 1 22%"
          >
            {{ option.label }}
          </Radio.Button>
        </Radio.Group>
      </div>

      <Button danger style="width: 100%" type="default" @click="clearConditions"
        >清空条件</Button
      >
    </Collapse.Panel>
  </Collapse>

  <div class="chat-container" :class="{ dark: useDarkMode() }">
    <!-- 消息容器 -->
    <div ref="messageContainer" class="messages">
      <div
        v-for="message in messages"
        :key="message.id"
        class="message-item"
        :class="{ 'self-message': message.isSelf }"
      >
        <img :src="message.avatar" class="avatar" alt="avatar" />
        <div class="message-content">
          <div
            class="bubble"
            :class="{ 'self-bubble': message.isSelf, dark: useDarkMode() }"
          >
            {{ message.content }}
            <!-- 建议问题按钮组 -->
            <div v-if="message.suggestedQuestions" class="suggested-questions">
              <button
                v-for="(question, index) in message.suggestedQuestions"
                :key="index"
                @click="sendSuggestedQuestion(question)"
                :class="{ dark: useDarkMode() }"
                class="suggested-question"
              >
                {{ question }}
              </button>
            </div>
          </div>
          <div class="timestamp" :class="{ 'self-timestamp': message.isSelf }">
            {{ message.timestamp }}
          </div>
        </div>
      </div>
    </div>

    <!-- 输入区域 -->
    <div class="input-area" :class="{ dark: useDarkMode() }">
      <input
        v-model="newMessage"
        @keyup.enter="sendMessage"
        placeholder="输入消息..."
        class="message-input"
        :class="{ dark: useDarkMode() }"
      />
      <button
        @click="sendMessage"
        :class="{ dark: useDarkMode() }"
        class="send-button"
      >
        发送
      </button>
      <!-- 发送按钮 -->
    </div>
  </div>
</template>

<style scoped>

/* 将输入框固定在最下方 */
.input-area {
  position: fixed; /* 固定在页面底部 */
  bottom: 0; /* 贴近底部 */
  left: 0;
  right: 0;
  padding: 10px;
  background-color: white; /* 可以根据需要调整背景色 */
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1); /* 添加阴影 */
  z-index: 100; /* 确保输入框在最上层 */
}
</style>
